<template>
  <div class="content">

    <div class="handles">
      <div class="tips" v-if="tipFlag">
        <Icon type="ios-alert" size='24' color='#2d8cf0' />
        本页面仅显示线索客户的到访记录，如需查看“到访客户”详情，<span class="goCustomer"
          @click="goCustomer">请前往“到访客户”页面</span><span>
          <Icon type="md-close" size='24' color='#2d8cf0' class="closeClass"
            @click="tipsClose" /></span></div>
      <Button class="tipBtn" type="primary" style="margin-left:10px;"
        v-if="unlocking('0101020502')" @click="exportData('1')">导出</Button>
      <Button class="tipBtn" type="primary" v-if="unlocking('0101020501')"
        @click="exportData('0')">导出Excel</Button>
    </div>
    <dt-grid ref="table" :columns="columns" page :onFetch='onFetch' :cell-height="80" />
    <more-modal ref="moreModal" @getDetail='getDetail' />

    <Modal v-model="detailsFlag" title="客户详情" width="80%" :styles="{ top: '5%' }"
      :footer-hide="true" @on-cancel="markCancel">
      <detail-page v-if="detailsFlag" :detailsParams="detailsParams"></detail-page>
    </Modal>
  </div>
</template>

<script>
  import moreModal from './components/moreModal.vue'
  import detailPage from '../details.vue'
  import columnOpt from './opt/column.js'
  import clueCustomerMgr from '@/biz/customer/clueCustomer.js'

  export default {
    components: {
      moreModal,
      detailPage,
    },
    data() {
      return {
        // 3.0
        sourcedata: [],
        targetdata: [],
        retain: '', //是否保留
        tipFlag: true,
        // 3.0

        columns: [],
        list: [],
        params: {},
        detailsFlag: false,
        detailsParams: {},
      }
    },
    mounted() {

      // this.getColumns()
      this.columns = columnOpt.options(this)
      this.$refs.table.init(this)
      this.$refs.table.fetch()
      clueCustomerMgr.selectTeamUser()
      clueCustomerMgr.getFilterOptions()
      clueCustomerMgr.getChannel()
      clueCustomerMgr.getArea()

    },
    methods: {
      // 3.0
      moreCounselorRecord(data) {
        this.$refs.moreModal.show(data.customerId)
      },
      goCustomer() {
        this.$router.push({
          path: '/allCustomersManagement/allCustomers/index',
        })

      },
      tipsClose() {
        this.tipFlag = false
      },
      fieldCancel() {
        this.$refs.dynamicHeader.hide()
      },

      // 导出
      exportData(mask) {
        let params = {
          ...this.params,
          maskCustomerPhone: mask
        }
        clueCustomerMgr.visitRecordExport(params)
      },

      // 获取表头
      // getColumns() {
      //   clueCustomerMgr.columns().then(res => {
      //     this.sourcedata = res
      //     this.targetdata = []
      //     this.columns = columnOpt.options(this, res)
      //     this.$refs.table.init(this)
      //     this.$refs.table.fetch()
      //   })
      // },

      // 列表数据
      onFetch(data) {
        this.params = data
        return clueCustomerMgr.counselorRecord(data).then(res => {
          this.list = res.list
          return res

        })
      },
      getDetail(rows) {
        this.detail(rows)
      },
      // 查看详情
      detail(row) {
        console.log();

        // 判断线索客户 还是案场客户
        if (row.hereto == '1' || row.hereto == '3') {
          this.detailsFlag = true
          this.detailsParams = {
            flag: 'clue',
            customerId: row.customerId,
            userCustomerId: row.userCustomerId,
            userId: row.userId,
            buildingId: this.$dt.buildInfo().housesId,
            cityCode: this.$dt.buildInfo().cityId,
          }
        } else {
          this.detailsFlag = true
          this.detailsParams = {
            customerId: row.customerId,
            userCustomerId: row.userCustomerId,
            buildingId: row.buildingId,
            userId: row.userId,
            buildingId: this.$dt.buildInfo().housesId,
            cityCode: this.$dt.buildInfo().cityId,
          }
        }


        // this.detailsFlag = true
        // this.detailsParams = {
        //   // flag: 'clue',
        //   customerId: rows.customerId,
        //   userCustomerId: rows.userCustomerId,
        //   userId: rows.userId,
        //   buildingId: this.$dt.buildInfo().housesId,
        //   cityCode: this.$dt.buildInfo().cityId,
        //   isFollow
        // }
      },
      markCancel() {
        this.detailsFlag = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .content {
    position: relative;
    padding: 20px;

    .topRecord {
      display: flex;
      flex-direction: row;

      .record1 {
        display: flex;
        flex-direction: row;

        p {
          text-align: center;
          padding: 0 20px;

          span {
            display: block;
            font-size: 20px;
            font-weight: bold;
          }

          em {
            display: block;
            font-style: normal;
          }
        }

        p.heng {
          border-right: 1px #ccc solid;
        }
      }

      .recordBtn {
        padding-left: 20px;


        p {
          span {
            color: #2db7f5
          }
        }

      }
    }

    .retainClass {
      margin-top: 20px;
    }

    .tips {
      background: rgba(254, 252, 236, 1);
      display: inline-block;
      padding: 5px;

      span {
        color: #2d8cf0;
        margin-right: 20px;
      }

    }

    .closeClass {
      vertical-align: -5px;
      cursor: pointer;
    }

    .goCustomer {
      cursor: pointer;
    }
  }

  .handles {
    overflow: hidden;

    .tips {
      float: left;
    }

    .tipBtn {
      float: right;
    }

    margin-bottom: 10px;
  }

  .footer {
    text-align: center;
    margin-top: 20px;
    border-top: 1px #eee solid;
    padding-top: 20px;

    button {
      width: 80px;
      margin: 0 10px;
    }
  }
</style>